<template>
  <div class="web-package-detail">
    <h2
      class="title w-text-center"
      @click="linkClick"
      :class="{ 'w-hover-text w-pointer': packageModel.url }"
    >{{ packageModel.name }}</h2>
    <p class="date w-text-center">{{ packageModel.dateStr }}</p>
    <p class="description w-text-center">{{ packageModel.describe }}</p>
    <!--marked 解析-->
    <w-marked-parsing :datastr="packageModel.content"/>
  </div>
</template>

<script lang="ts">
import PackageModel from "@/models/PackageModel";
import WMarkedParsing from "@/components/global/marked/parsing.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    WMarkedParsing
  }
})
export default class WebPackageDetail extends Vue {
  packageModel = new PackageModel();

  mounted() {
    this.packageModel._id = this.$route.query.id as string;
    this.findOne();
  }

  // 获取单个数据
  findOne() {
    this.packageModel
      .getModel()
      .then(() => {})
      .catch(() => {});
  }
  // 跳转链接
  linkClick() {
    if (this.packageModel.url) {
      window.open(this.packageModel.url);
    }
  }
}
</script>

<style lang="scss" scoped>
.web-package-detail {
  padding: 20px;
  > .date {
    color: #999;
  }
  > .description {
    color: #666;
    line-height: 24px;
  }
}
</style>
